<template>
	<view class="detail">
		<view class="header">{{ goodsItem.name }}</view>
		<u-list :height="screenHeight">
			<image class="img" :src="goodsItem.primaryPicUrl" mode=""></image>
			<u-divider :text="goodsItem.promotionDesc"></u-divider>
			<view class="price">
				<text class="new">￥{{ goodsItem.retailPrice }}.00</text>
				<text class="old">￥{{ goodsItem.counterPrice }}.00</text>
			</view>
			<view class="list" style="margin-left: 5%;font-size: 28upx;line-height: 50upx;">
				<view>1) 100%桑蚕丝填充，丝丝精粹不掺杂</view>
				<view>2) 创新井字拉网工艺，桑蚕丝不易黏连结块</view>
				<view>3) 两种面料可选，贡缎手感细腻，竹棉清爽透气</view>
				<view>4) AB双面设计，多种活性印花不易褪色</view>
				<view>1) 100%桑蚕丝填充，丝丝精粹不掺杂</view>
				<view>2) 创新井字拉网工艺，桑蚕丝不易黏连结块</view>
				<view>3) 两种面料可选，贡缎手感细腻，竹棉清爽透气</view>
				<view>4) AB双面设计，多种活性印花不易褪色</view>
			</view>
		</u-list>

		<!-- 底部商品导航 -->
		<view class="goods-carts"><uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" /></view>
	</view>
</template>

<script>
	import {mapState,mapMutations} from "vuex"
export default {
	data() {
		return {
			goodsItem: {},
			screenHeight: '',
			options: [
				{
					icon: 'headphones',
					text: '客服'
				},
				{
					icon: 'cart',
					text: '购物车',
					info: 0
				}
			],
			buttonGroup: [
				{
					text: '加入购物车',
					backgroundColor: '#ff0000',
					color: '#fff'
				},
				{
					text: '立即购买',
					backgroundColor: '#ffa200',
					color: '#fff'
				}
			]
		};
	},
	onLoad(options) {
		// console.log(options.goodsItem)
		this.goodsItem = JSON.parse(options.goodsItem);
	},
	methods: {
		//
		...mapMutations('cart',['addGoodsItem']),
		//底部导航点击事件
		onClick(e) {
			if(e.index === 1){
				uni.switchTab ({
					url:"/pages/Cart/Cart"
				})
			}
		},
		buttonClick(e) {
			console.log(e);
			if(e.index === 0){
				this.addGoodsItem(this.goodsItem)
				this.options[1].info = this.cartList.length
				uni.showToast({
					title:'加入购物车成功',
				})
			}
		}
	},
	computed:{
	...mapState('cart',['cartList'])
	},
	mounted() {
		//获取页面高度
		this.screenHeight = uni.getSystemInfoSync().windowHeight - 90; //获取当前页面的高度
		//给购物车赋值
		this.options[1].info = this.cartList.length
		
	}
};
</script>

<style lang="scss" scoped>
.detail {
	.header {
		height: 90rpx;
		width: 100%;
		text-align: center;
		line-height: 90rpx;
	}
	.img {
		height: 650rpx;
		width: 100%;
	}
	.price {
		padding-left: 5%;
		margin-bottom: 16rpx;
		.new {
			color: #bb2c08;
			font-size: 30rpx;
		}
		.old {
			font-size: 24rpx;
			margin-left: 16rpx;
			text-decoration: line-through;
		}
	}
}
.goods-carts {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	position: fixed;
	left: 0;
	right: 0;
	/* #ifdef H5 */
	left: var(--window-left);
	right: var(--window-right);
	/* #endif */
	bottom: 0;
}
</style>
